<template>
  <div class="apartment-car" @click="$emit('click')">
    <el-card :body-style="{}">
      <el-image class="image" :src="computedImage">

      </el-image>
      <div class="box flex-col-center">
        <div class="content-box">
          <div class="name flex-row-start" style="font-size: 14px">
            <h3>{{item.apartmentName}}</h3>
          </div>
          <div class="price flex-row-start">
            <div class="price-text">${{lowestPrice}}</div>
            <div style="margin-left: 5px;font-size: 13px">起/周</div>
          </div>
          <div v-for="school in item.schoolList" class="flex-row-start" style="font-size: 13px">
            <i class="el-icon-s-flag" style="margin-right: 3px"></i>
            <div style="margin-right: 3px">{{school.schoolName}}</div>|
            <div style="margin-left: 3px">
              <span style="margin-right: 1px">步行</span>
              {{school.onfoot}}分钟</div>
          </div>
          <div></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import apartment from "@/views/bg/apartment/apartment/index.vue";
import apartmentApi from "@/api/apartment/apartment";

export default {
  name: "ApartmentCard",
  props:{
    item:{
      type:Object
    }
  },
  data() {
    return {
      lowestPrice:0
    }
  },
  methods: {
    computedLowestPrice(){

      let list=this.item.roomList
      this.lowestPrice=0
      if(list.length>0){
        list.sort((a,b)=>{
          return a.price - b.price
        })
        this.lowestPrice=list[0].price
      }
    },
  },
  computed:{
    computedImage(){
      return (this.item.imageList && this.item.imageList.length>0 )?this.item.imageList[0]:''
    }
  },

  mounted() {
   this.computedLowestPrice()
  }
}
</script>

<style scoped lang="less">
  .apartment-car{
    width: 300px;
    .image{

    }
    .box{
      width: 100%;
      height: 100%;
      .content-box{
        width: 80%;
        height: 90%;
        .price{
          .price-text{
            color: tomato;
            font-size: 25px;
          }
        }
        div{
          margin: 2px 0;
        }
      }
    }
    transition: all 0.3s;
    cursor: pointer;
    &:hover{
      transform: translateY(-3%);
    }
  }
</style>